<template>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane label="产品信息" class="cpxx-box" @click="getLists()">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="序号" width="140" prop="id" class="xhao">
          </el-table-column>
          <el-table-column label="logo路径" width="150">
            <img src="../../assets/logo.png" alt="" class="img1" />
          </el-table-column>
          <el-table-column prop="productName" label="产品名称" width="240">
          </el-table-column>
          <el-table-column prop="logoPictureId" label="图片路径" width="300">
          </el-table-column>
          <el-table-column prop="describe" label="产品描述" width="400">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="info" id="el-btn">置顶</el-button>

              <el-button
                type="success"
                id="el-btn"
                @click="handleEdit(scope.$index, scope.row)"
              >
                编辑
              </el-button>

              <el-button
                type="danger"
                id="el-btn"
                @click="handleClick(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-dialog title="编辑" :visible.sync="dialogVisible">
          <el-form :model="form">
            <el-form-item label="序号">
              <el-input v-model="form.id" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="产品名称">
              <el-input
                v-model="form.productName"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="图片路径">
              <el-input
                v-model="form.logoPictureId"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="产品描述">
              <el-input v-model="form.describe" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirmEdit">确 定</el-button>
          </span>
        </el-dialog>
        <div class="pagination-box">
          <el-pagination
            background
            layout="total,prev, pager, next"
            :total="100"
            :page-size="10"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="新增产品" class="xzcp">
        <div class="top-box">
          <div class="shch-img">
            <p>上传logo</p>
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </div>
          <div class="ann-box">
            <p>状态</p>
            <el-radio-group v-model="radio" class="radio-box">
              <el-radio :label="1">启动</el-radio>
              <el-radio disabled :label="2">禁用</el-radio>
            </el-radio-group>
          </div>
          <div class="select-box">
            <p>排序</p>
            <el-select v-model="value" placeholder="请选择" class="sel">
              <el-option
                class="opt"
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="shch-img2">
            <p>上传图片</p>
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
          <div class="inp-box">
            <p>产品名称：</p>
            <el-input
              v-model="input"
              placeholder="请输入内容"
              class="input"
            ></el-input>
          </div>
        </div>
        <div class="bottom-box">
          <p>编辑内容</p>
          <textarea
            name=""
            id=""
            rows="10"
            class="inp"
            v-model="textareas"
          ></textarea>
          <!-- <div class="inp"></div> -->
          <div class="btn-ann">
            <button class="ylann">预览</button>
            <button class="tjann" @click="Adds">提交</button>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<style scoped>
.pagination-box {
  margin-top: 30px;
  width: 100%;
  text-align: end;
}
.btn-ann button {
  border: none;
  width: 90px;
  height: 30px;
  margin: 0 15px;
  border-radius: 5px;
}
.btn-ann .tjann {
  background-color: blue;
  color: #fff;
}
.cpxx-box {
  height: 100%;
}
.xzcp-box {
  height: 600px;
}
.top-box {
  display: flex;
  height: 250px;
  border-bottom: 2px solid #ccc;
}
.bottom-box {
  height: 300px;
  padding: 20px;
}
.bottom-box > p {
  text-align: left;
  margin-bottom: 20px;
}
.bottom-box .inp {
  width: 100%;
  border-color: rgb(212, 234, 247);
  background-color: rgb(236, 244, 249);
  margin-bottom: 30px;
}

/* logo图片 */
.shch-img {
  width: 160px;
  height: 160px;
  margin-left: 30px;
}
.shch-img p {
  text-align: left;
  margin: 30px 0 15px 0;
}
.shch-img .avatar-uploader {
  background-color: #eee;
  width: 130px;
  height: 130px;
  line-height: 130px;
}
/* 状态 */
.ann-box {
  width: 150px;
  height: 150px;
  margin-left: 30px;
}
.ann-box p {
  text-align: left;
  margin: 30px 0 40px 0;
}
.ann-box .radio-box {
  display: flex;
}
/* 排序 */
.select-box {
  width: 150px;
  height: 150px;
  margin-left: 30px;
}
.select-box p {
  text-align: left;
  margin: 30px 0 15px 0;
}
.select-box .sel {
  width: 100px;
  height: 40px;
}
/* 上传图片 */
.shch-img2 {
  width: 160px;
  height: 160px;
  margin-left: 30px;
}
.shch-img2 p {
  text-align: left;
  margin: 30px 0 15px 0;
}
.shch-img2 .avatar-uploader {
  background-color: #eee;
  width: 130px;
  height: 60px;
  line-height: 60px;
}
/* 产品名称 */
.inp-box {
  margin: 30px 0 15px 30px;
  display: flex;
  width: 300px;
  /* border: ; */
}
.inp-box .input {
  width: 150px;
}

.btn-box button {
  border: none;
  width: 110px;
  height: 30px;
  background-color: #fff;
  margin-right: 10px;
  font-size: 12px;
}
.btn-box .btn {
  background-color: rgb(17, 100, 216);
  color: #fff;
}
.img1 {
  width: 80px;
  height: 80px;
}
.xhao {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  background-color: #ccc;
  text-align: center;

  line-height: 30px;
}
#el-btn {
  width: 70px;
  height: 40px;
  font-size: 14px;
}
</style>
<script>
import { getAddData } from "@/request/api/all.js";
import { getProductList } from "@/request/api/all.js";
import { getDeletList, editList } from "@/request/api/all.js";
export default {
  data() {
    return {
      page: 1,
      pageSizes: 0,
      pageNums: 0,
      dialogImageUrl: "",
      dialogVisible: false,
      imageUrl: null,
      radio: 1,
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
      tableData: [],
      input: "",
      textareas: "",
      form: {},
      editIndex: -1,
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log("row", row);
      this.form = row;
      this.dialogVisible = true;
    },
    async confirmEdit() {
      let res = await editList({
        describe: this.form.describe,
        id: this.form.id,
        indexView: 0,
        logoPictureId: 0,
        pictureId: 0,
        productName: this.form.productName,
        sort: 0,
      });
      console.log("edit", res);

      this.dialogVisible = false;
    },
    handleClick(row) {
      console.log(row.id);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(async () => {
          //删除
          let ids = await getDeletList(row.id);
          console.log("id", ids);
          this.getLists();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    bjbtn() {
      this.$confirm(
        "检测到未保存的内容，是否在离开页面前保存修改？",
        "确认信息",
        {
          distinguishCancelAndClose: true,
          confirmButtonText: "保存",
          cancelButtonText: "放弃修改",
        }
      )
        .then(() => {
          this.$message({
            type: "info",
            message: "保存修改",
          });
        })
        .catch((action) => {
          this.$message({
            type: "info",
            message:
              action === "cancel" ? "放弃保存并离开页面" : "停留在当前页面",
          });
        });
      handleAvatarSuccess;
    },

    handleAvatarSuccess() {},
    beforeAvatarUpload() {},
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getLists();
      console.log(`当前页: ${val}`);
    },
    //添加数据
    async Adds() {
      let res = await getAddData({
        describe: this.textareas,
        id: 0,
        indexView: 0,
        logoPictureId: 0,
        pictureId: 0,
        productName: this.input,
        sort: 111,
      });
      console.log("res", res);
    },
    //渲染
    async getLists() {
      const params = {
        pageNum: this.page, //页码
        pageSize: 10, //一页显示数量
      };
      let res = await getProductList(params);
      console.log("res", res.data);
      this.tableData = res.data.rows;
    },
  },
  created() {
    this.getLists();
    this.Adds();
  },
};
</script>
 